<template>
  <div class="login">
    <div class="loginForm">
      <div class="loginTitle">
        {{ title }}
      </div>
      <div class="loginFormItem">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="0"
        >
          <el-form-item prop="Username">
            <el-input
              prefix-icon="el-icon-user-solid"
              v-model="ruleForm.Username"
              placeholder="用户名"
            ></el-input>
          </el-form-item>
          <el-form-item prop="Password">
            <el-input
              v-model="ruleForm.Password"
              placeholder="密码"
              type="password"
            >
            </el-input>
          </el-form-item>
          <!-- <el-form-item label="" prop="Code" class="codeStyle">
            <el-input class="v_code" v-model="ruleForm.Code" placeholder="验证码">
            </el-input>
            <router-view ref="ruleFormCode"></router-view>
          </el-form-item> -->
          <el-form-item>
            <el-button type="primary" @click="submitForm()">登 录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
import { login, getMenuDate, roleMenuDate } from "../api.js";
import { mapState } from "vuex";
export default {
  name: "Login",
  data() {
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        callback();
      }
    };
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else {
        callback();
      }
    };
    return {
      title: "博物馆管理系统",
      ruleForm: {
        Username: "admin",
        Password: "Aa2022@@",
        // Username: '',
        // Password: '',
        Code: "",
        newPassword: "",
      },
      rules: {
        Username: [
          {
            validator: checkUsername,
            trigger: "blur",
          },
        ],
        Password: [
          {
            validator: validatePass,
            trigger: "blur",
          },
        ],
        Code: [
          {
            required: true,
            message: "请输入验证码",
            trigger: "blur",
          },
        ],
      },
      companyList: [],
    };
  },
  mounted() {
    this.$store.commit("refreshAccessToken", "");
    this.$store.commit("refreshActiveMenu", "");
    this.$store.commit("refreshTagList", []);
  },
  methods: {
    open(type) {
      var html;
      if (type == 1) {
        html = "密码强度不够，请输入新密码";
      } else if (type == 2) {
        html = "密码超过90天，请输入新密码";
      } else {
        html = "超管密码强度不足";
      }
      let inputPattern =
        type == 3
          ? /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*[~!@#$%^&*?_-]).{15}$/
          : /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*[~!@#$%^&*?_-]).{8,12}$/;
      let inputErrorMessage =
        type == 3
          ? "新密码格式不正确,密码由大小写字母、数字、特殊符号(~!@#$%^&*?_-)组成的15位字符"
          : "新密码格式不正确,密码由大小写字母、数字、特殊符号(~!@#$%^&*?_-)组成的8-12位字符";
      this.$prompt(html, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: inputPattern,
        inputErrorMessage: inputErrorMessage,
      })
        .then(({ value }) => {
          this.ruleForm.newPassword = value;
          this.submitForm();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    //获取表单数据
    // getMenuDate() {
    //   roleMenuDate().then(res => {
    //     if (res.ErrorCode == 0) {
    //       this.$store.commit("refreshMenuList", res.Data.menu_tree);
    //       this.$router.push({
    //         path: res.Data.menu_tree[0].children[0].url,
    //         query: {
    //           breadcrumbNameP: res.Data.menu_tree[0].name,
    //           breadcrumbName: res.Data.menu_tree[0].children[0].name,
    //           breadcrumbPath: res.Data.menu_tree[0].children[0].url
    //         }
    //       })
    //       this.$store.commit("refreshCode", res.Data.menu_tree[0].code);
    //       this.$store.commit("refreshActiveMenu", res.Data.menu_tree[0].children[0].code);
    //     } else {
    //       this.$message.error(res.ErrorMsg);
    //     }
    //   })
    // },
    submitForm() {
      this.$refs["ruleForm"].validate((valid) => {
        if (valid) {
          var loginFrom = {
            username: this.ruleForm.Username,
            password: this.ruleForm.Password,
            verify_code: this.ruleForm.Code,
            new_password: this.ruleForm.newPassword,
            auth_code: this.identifyCode.auth_code,
          };
          var reqContent = window.btoa(JSON.stringify(loginFrom));
          var sha256 = require("js-sha256").sha256;
          var sign = sha256(JSON.stringify(loginFrom));

          this.$store.commit("refreshNickName", "管理员");
          //       this.$store.commit("refreshAdminType", res.Data.admin_info.AdminType)
          //       this.$store.commit("refreshAccessToken", res.Data.token)
          this.$router.push({
            path: "/index",
            // query: {
            //   breadcrumbNameP: res.Data.menu_tree[0].name,
            //   breadcrumbName: res.Data.menu_tree[0].children[0].name,
            //   breadcrumbPath: res.Data.menu_tree[0].children[0].url
            // }
          });
          // login({
          //   reqContent: reqContent,
          //   sign: sign
          // }).then(res => {
          //   if (res.ErrorCode == 0) {
          //     if (res.Data.admin_info.StrengthCheck && !res.Data.admin_info.ForcePasswordChange) {
          //       this.$store.commit("refreshNickName", res.Data.admin_info.AdminName)
          //       this.$store.commit("refreshAdminType", res.Data.admin_info.AdminType)
          //       this.$store.commit("refreshAccessToken", res.Data.token)
          //       this.getMenuDate()
          //     } else {
          //       if (!res.Data.admin_info.StrengthCheck && res.Data.admin_info.PermLevel == 1) {
          //         //超级管理员密码强度
          //         this.open(3)
          //       } else {
          //         this.open(1)
          //       }
          //       if (res.Data.admin_info.ForcePasswordChange) {
          //         this.open(2)
          //       }
          //     }
          //   } else {
          //     this.ruleForm.newPassword = '';
          //     this.$message.error(res.ErrorMsg);
          //     this.$refs.ruleFormCode.refreshCode();
          //   }
          // })
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
  },
  computed: {
    ...mapState({
      identifyCode: (state) => state.identifyCode,
    }),
  },
};
</script>
<style scoped lang="scss">
.login {
  width: 100%;
  height: 100%;
  background: #ae0c25;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url("../assets/images/logeBage.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;

  .loginForm {
    display: inline-block;
    width: 500px;
    height: 330px;
    border-radius: 10px;
    background: #fff;
    margin-left: -45px;

    .loginTitle {
      // margin-left: 50px;
      // margin-right: 50px;
      font-size: 26px;
      color: #e93e4a;
      // font-weight: 600;
      padding: 15px 0;
      border-bottom: 1px solid rgb(217, 191, 192);
    }

    .loginFormItem {
      padding-top: 20px;
    }

    .el-form {
      .el-form-item {
        padding: 0 40px;

        button {
          width: 100%;
          height: 40px;
          border-radius: 5px;
          font-size: 18px;
        }

        .el-select {
          width: 280px;
          height: 45px;

          /deep/ .el-input--suffix {
            .el-input__inner {
              border-radius: 25px;
              height: 45px;
            }

            .el-input__icon {
              margin-top: 0;
            }
          }
        }
      }

      /deep/ .el-input--prefix,
      /deep/ .el-input--prefix {
        // width: 280px;
        height: 45px;

        .el-input__inner {
          height: 45px;
          border-radius: 5px;
          padding-left: 40px;
        }
      }

      /deep/ .el-input__icon {
        font-size: 18px;
        // color: #AE0C25;
        margin-left: 5px;
        margin-top: 3px;
      }
    }
  }
}
</style>
